<template>
  <div class="page-header xui-fc">
    <div class="content-wrap xui-fc">
      <a class="logo xui-fl">
        <img src="@/assets/images/logo.png" alt="">
      </a>
      <div class="xui-fr xui-fc">
        <ul class="header-nav-main xui-margin-top-xs xui-fl">
          <li v-if="isRoutesAdded  && item.title && item.name !== 'userCenter'" v-for="(item,index) in SiteMap" :key="index">
            <router-link :to="{name: item.name}">{{item.title}}</router-link>
            <!-- <a :href="item.href">{{item.title}}</a> -->
            <ul class="header-nav-child">
              <li class="" v-if="!child.hide " v-for="(child,index) in item.children" :key="index">
                <p>
                  <router-link :to="{name: child.name}" v-if="!child.hide">{{child.title}}</router-link>
                </p>
              </li>
            </ul>
            <div class="header-nav-child-bg"></div>
          </li>
        </ul>

        <div class="xui-fl tool-box">
          <div class="xui-fl xui-margin-right-xl">
            |
            <a href="javascript:void(0);" @click="toChinese">中文</a>
            <a href="javascript:void(0);" @click="toEnglish">ENG</a> |
          </div>
          <!-- <span class="xui-margin-right-xs color-gray">|</span>
          <a href="javascript:void(0);" class="xui-margin-right-xs" @click="toChinese">中文</a>
          <a href="javascript:void(0);" @click="toEnglish">ENG</a>
          <span class="xui-margin-left-xs color-gray">|</span> -->

          <div class="xui-fl" v-if="!isEnglish">
            <span v-if="!isLoging" class="xui-margin-left-sm">
              <span class="login-link" @click="showLogin" style="cursor:pointer">登录</span>
              <router-link :to="'/register'">注册</router-link>
            </span>
            <span v-else>
              <router-link class="xui-margin-left-sm" :to="'/userCenter'">
                <i class="iconfont icon-user"></i>
              </router-link>
              <span class="xui-margin-left-xs logout-btn" @click="logOut">退出</span>
            </span>
          </div>
        </div>
      </div>
    </div>

    <!--登录框-->
    <login-dialog></login-dialog>

    <!-- 提示需要登录的对话框 -->
    <need-login-dialog></need-login-dialog>
  </div>
</template>
<script>
  import LoginDialog from "./loginDialog.vue";
  import needLoginDialog from "./needLoginDialog.vue";
  import {
    getLang
  } from "@/utils/lang";

  export default {
    components: {
      LoginDialog,
      needLoginDialog
    },
    data() {
      return {
        form: {
          username: "",
          password: ""
        }
      };
    },
    computed: {
      SiteMap() {
        return this.$store.getters.siteMap;
      },
      isRoutesAdded() {
        return this.$store.state.router.isRemoteRoutesAdded;
      },
      isLoging() {
        return Boolean(this.$store.getters.userId);
      },
      isEnglish() {
        return getLang() == "en";
      }
    },
    methods: {
      showLogin() {
        this.$store.dispatch("ToggleLoginDialog", true);
      },
      toChinese() {
        this.$store.dispatch("toChinese");
        window.location.href = "/";
        // location.reload();
      },
      toEnglish() {
        // this.$alert(
        //   "英文网站正在建设中。English website is building now.",
        //   "提示 Info",
        //   {
        //     confirmButtonText: "确定"
        //   }
        // );

        // 切换到英文网站
        this.$store.dispatch("toEnglish");
        window.location.href = "/";

        location.reload();
      },
      logOut() {
        this.$confirm("是否退出登录?", "退出", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
          .then(() => {
            this.$store.dispatch("LogOut");
            this.$router.push({
              name: "home"
            });
          })
          .catch(() => {});
      }
    }
  };

</script>

<style lang="less" scoped>
  @import url(../../assets/css/config.less);

  .page-header {
    background: #fff;
    height: 56px;
    position: relative;
    .login-link,
    .logout-btn {
      cursor: pointer;
    }
    .login-link:hover,
    .logout-btn:hover {
      color: @color-primary;
    }

    .content-wrap {
      // padding-top: 0px;
      width: 1200px;
      margin: 0 auto;
      .logo {
        margin-top: 10px;
      }
      .header-nav-main {
        >li {
          display: inline-block;
          height: 100%;
          line-height: 48px;
          >a {
            display: block;
            height: 100%;
            padding: 0 20px;
            font-size: 14px;
            color: #474747;
            cursor: pointer;
          }

          .router-link-active {
            color: #bf9c51;
          }
        }
        >li:hover {
          background: url("../../assets/images/header-nav-child-arrow.png") no-repeat center bottom;
          >a {
            color: @color-primary;
          }
        }
        >li:hover .header-nav-child {
          display: block;
          opacity: 1;
          white-space: nowrap;
        }

        >li:hover .header-nav-child-bg {
          height: 50px;
          opacity: 1;
        }
        >li:first-child:hover {
          background-image: none;
        }
        >li:first-child:hover .header-nav-child-bg {
          height: 0;
        }
        >li:last-child {
          .header-nav-child {
            margin-left: -110px;
          }
        }

        .header-nav-child {
          display: none;
          opacity: 0;
          transition: opacity 0.3s;
          position: absolute;
          transform: translateX(-50%);
          margin-left: 40px;
          z-index: 11;
          >li {
            display: inline-block;
            padding: 0 20px 0 14px;
            background: url("../../assets/images/nav-child-list-dot.png") no-repeat right center;
            p {
              a {
                color: #fff;
                font-size: 14px;
              }
              a:hover {
                color: #d1af85;
              }
            }
          }
          >li:last-child {
            background: none;
          }
        }
      }

      .tool-box {
        line-height: 48px;
        font-size: 13px;
        height: 48px;
        margin-top: 0.5rem;
        margin-left: 20px;
        a:hover {
          color: @color-primary;
        }
        i {
          font-size: 20px;
          position: relative;
          top: 2px;
        }
      }
      .router-link-active {
        color: #d1af85;
      }
    }

    .header-nav-child-bg {
      position: absolute;
      top: 54px;
      left: 0;
      height: 0;
      opacity: 0;
      width: 100%;
      z-index: 10;
      background: url("../../assets/images/header-nav-child-bg.png");
      transition: height 0.2s;
    }
  }

</style>
